/* @flow */
'use strict';

var React = require('react-native');

var {
	StyleSheet,
	View,
	ListView,
	Text,
	TouchableOpacity,
	AlertIOS
} = React;

//初始化数据
var DataAry = new Array();
DataAry.push("ActivityIndicatorIOS");
DataAry.push("DatePickerIOS");
DataAry.push("Image");
DataAry.push("ListView");
DataAry.push("MapView");
DataAry.push("PickerIOS");
DataAry.push("ProgressViewIOS");
DataAry.push("ScrollView");
DataAry.push("SegmentedControllIOS");
DataAry.push("SliderIOS");
DataAry.push("SwitchIOS");
DataAry.push("TabBarIOS");
DataAry.push("Text");
DataAry.push("TextInput");
DataAry.push("TouchableHighlight");
DataAry.push("TouchableOpacity");
DataAry.push("View");
DataAry.push("WebView");
DataAry.push("其他Api组件");
DataAry.push("使用原生UI");

var ActivityIndicatorIOSView = require('./uikit/ActivityIndicatorIOSView');
var DatePickerIOSView = require('./uikit/DatePickerIOSView');
var ImageView = require('./uikit/ImageView');
var MapViewCom = require('./uikit/MapViewCom');
var PickerIOSView = require('./uikit/PickerIOSView');
var ProgressViewIOSView = require('./uikit/ProgressViewIOSView');
var ScrollViewCom = require('./uikit/ScrollViewCom');
var SegmentedControllIOSView = require('./uikit/SegmentedControllView');
var SliderIOSView = require('./uikit/SliderIOSView');
var SwitchIOSView = require('./uikit/SwitchIOSView');
var TabBarIOSView = require('./uikit/TabBarIOSView');
var TextView = require('./uikit/TextView');
var TextInputView = require('./uikit/TextInputView');
var TouchableHighlightView = require('./uikit/TouchableHighlightView');
var TouchableOpacityView = require('./uikit/TouchableOpacityView');
var ViewComponent = require('./uikit/ViewComponent');
var WebViewComponent = require('./uikit/WebViewComponent');
var OtherAPIView = require('./uikit/OtherAPIView');
var NativeUI = require('./uikit/NativeUI')


var MainView = React.createClass({

	getInitialState: function() {
		var ds = new ListView.DataSource({
			rowHasChanged: (r1, r2) => r1 !== r2
		});
		return {
			dataSource: ds.cloneWithRows(['row 1', 'row 2']),
		};
	},

	componentDidMount: function() {
		this.setState({
			dataSource: this.state.dataSource.cloneWithRows(DataAry)
		});
	},

	render: function() {
		return (
			<ListView
		      dataSource={this.state.dataSource}
		      renderRow={this.renderRow}
		    />
		);
	},

	_onPressButton: function(item) {
		console.log(item);
		console.log(NativeUI);
		console.log(ActivityIndicatorIOSView);
		if (item === "ActivityIndicatorIOS") {
			this.props.navigator.push({
				title: item,
				component: ActivityIndicatorIOSView,
				backButtonTitle: '返回',
			});
		} else if (item === "DatePickerIOS") {
			this.props.navigator.push({
				title: item,
				component: DatePickerIOSView,
				backButtonTitle: '返回',
			});
		} else if (item === "Image") {
			this.props.navigator.push({
				title: item,
				component: ImageView
			});
		} else if (item === "ListView") {
			AlertIOS.alert(
				'消息',
				'ListView请参照当前页面', [{
					text: '确定',
					onPress: () => console.log('Foo Pressed!')
				}, {
					text: '取消',
					onPress: () => console.log('Bar Pressed!')
				}, ]
			);
		} else if (item === "MapView") {
			this.props.navigator.push({
				title: item,
				component: MapViewCom
			});
		} else if (item === "PickerIOS") {
			this.props.navigator.push({
				title: item,
				component: PickerIOSView
			});
		} else if (item === "ProgressViewIOS") {
			this.props.navigator.push({
				title: item,
				component: ProgressViewIOSView
			});
		} else if (item === "ScrollView") {
			this.props.navigator.push({
				title: item,
				component: ScrollViewCom
			});
		} else if (item === "SegmentedControllIOS") {
			this.props.navigator.push({
				title: item,
				component: SegmentedControllIOSView
			});
		} else if (item === "SliderIOS") {
			this.props.navigator.push({
				title: item,
				component: SliderIOSView
			});
		} else if (item === "SwitchIOS") {
			this.props.navigator.push({
				title: item,
				component: SwitchIOSView
			});
		} else if (item === "TabBarIOS") {
			this.props.navigator.push({
				title: item,
				component: TabBarIOSView
			});
		} else if (item === "Text") {
			this.props.navigator.push({
				title: item,
				component: TextView
			});
		} else if (item === "TextInput") {
			this.props.navigator.push({
				title: item,
				component: TextInputView
			});
		} else if (item === "TouchableHighlight") {
			this.props.navigator.push({
				title: item,
				component: TouchableHighlightView
			});
		} else if (item === "TouchableOpacity") {
			this.props.navigator.push({
				title: item,
				component: TouchableOpacityView
			});

		} else if (item === "View") {
			this.props.navigator.push({
				title: item,
				component: ViewComponent
			});
		} else if (item === "WebView") {
			this.props.navigator.push({
				title: item,
				component: WebViewComponent
			});
		} else if (item === "其他Api组件") {
			this.props.navigator.push({
				title: item,
				component: OtherAPIView
			});
		} else if (item === "使用原生UI") {
			this.props.navigator.push({
				title: item,
				component: NativeUI
			});
		}
	},

	renderRow: function(item) {
		return (
			<TouchableOpacity onPress={()=>this._onPressButton(item)}>
				<View style={styles.cellStyle}>
					<Text style={styles.cellContentText}>{item}</Text>
				</View>
			</TouchableOpacity>);
	},

});


var styles = StyleSheet.create({
	cellStyle: {
		flex: 1,
		height: 40,
		alignItems: 'flex-start',
		justifyContent: 'center'
	},

	cellContentText: {
		fontSize: 20,
		marginLeft: 10
	}
});


module.exports = MainView;